<template>
	<view class="box addBank">
		<form @submit="" @reset="" class="change-mobile-form">
			<view class="addBankTitle">
				<text>
					添加银行卡
				</text>
				<text>
					请添加本人名下银行卡
				</text>
			</view>

			<view class="change-mobile-group flex flai">
				<view class="section-title">
					姓名
				</view>
				<input type="text" value="" v-model="name" class="flex1" placeholder="请输入姓名" />
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					身份证号
				</view>
				<input value="" v-model="card" class="flex1" placeholder="请输入身份证号" />
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					银行卡号
				</view>
				<input type="number" value="" v-model="bankCard" class="flex1" placeholder="请输入银行卡号" @change="bankCardEvent()" />
			</view>
			<view v-if="bankName">
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					所属银行
				</view>
				<view class="flex1">{{bankName}}</view>
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					银行卡类型
				</view>
				<view class="flex1">{{bankType}}</view>
			</view>
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					手机号
				</view>
				<input type="number" maxlength="11" value="" v-model="mobile" class="flex1" placeholder="请输入手机号" />
			</view>
			<view class="change-mobile-group flex flai">
				<view class="section-title">
					验证码
				</view>
				<input type="number" maxlength="6" value="" v-model="smsCode" class="flex1" placeholder="请输入验证码" />

				<button type="primary" v-if="showbtn" class="send-code" @click="getMobileCode">{{phoneMsg}}</button>
				<button class="send-code" v-else>{{code_ts}}</button>
			</view>
			<button form-type="submit" class="next-btn" v-clickAgain="phoneSubmit" >提交</button>
		</form>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	import BIN from 'bankcardinfo';
	export default {
		data() {
			return {
				name: '', //姓名
				card: '', //身份证号
				bankCard: '', //银行卡号
				bankName: '', //银行卡名称
				bankType: '', //银行卡类型
				bankCode: '', //银行编号
				mobile: '', //手机号
				smsCode: '', //验证码
				phoneMsg: '获取验证码',
				showbtn: true, // 展示获取验证码或倒计时按钮判断
				code_ts: '获取验证码', //倒计时提示文字
				sec: 60, // 倒计时秒数
				flowId: '', //流程id
			}
		},
		onShow(){
		  var message = 1; 
		  var messageAsBoolean = Boolean(message);
			  console.log(messageAsBoolean)
		},

		methods: {
			// 输入完银行卡号以后显示银行名称以及类型
			bankCardEvent() {
				let str = this.bankCard
				BIN.getBankBin(str)
					.then((data) => {
						console.log(data)
						this.bankName = data.bankName;
						this.bankType = data.cardTypeName;
						this.bankCode = data.bankCode;
					})
					.catch((err) => {
						uni.showToast({
							title: '银行卡号不正确',
							duration: 2000,
							icon: 'none'
						});
						return
					})
			},
			// 获取手机验证码
			getMobileCode() {

				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!regIdNo.test(this.card)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (!this.bankCard) {
					uni.showToast({
						title: '请输入银行卡号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var mobileRegex = /^1\d{10}$/
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				let data = {
					fullName: this.name,
					cardid: this.card,
					mobile: this.mobile,
					bankCardNo: this.bankCard,
					bankName: this.bankName,
					bankCode: this.bankCode,
					cardType: this.bankType,
					flowId: this.flowId
				}
				api.myHelp.confirmCardSign(data).then(res => {
					if (res.code == 1) {
						this.flowId = res.data.flowId;
						var timer = setInterval(() => {
							this.sec = this.sec - 1
							this.code_ts = this.sec + 'S后重试'
							this.showbtn = false
							if (this.sec === 0) {
								clearInterval(timer)
								this.sec = 60
								this.code_ts = this.sec + 'S后重试'
								this.showbtn = true
								this.phoneMsg = "重新获取"
							}
						}, 1000)
					}
				})

			},
			// 提交按钮
			phoneSubmit() {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!regIdNo.test(this.card)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (!this.bankCard) {
					uni.showToast({
						title: '请输入银行卡号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				var mobileRegex = /^1\d{10}$/
				if (!mobileRegex.test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if (!this.smsCode) {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let data = {
					verifyCode: this.smsCode,
					flowId: this.flowId
				}
				api.myHelp.confirmBank(data).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '绑定成功'
						})
						uni.navigateTo({
							url: "/pages/myMutualHelp/bindBanknone"
						})
					}
				})

			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
	@import url("./bindBank.css");

	.next-btn {
		margin-top: 100rpx !important;
	}
</style>
